<template>
  <div class="AnnouncementList">
    <div class='title'>
      <span></span>
      <span>公告</span>
    </div>
    <div class="allList">
      <div class="list" v-for="(item,index) in list" :key='index' @click='$router.push({name:"Announcement",params:{id:item.id}})'>
        <span>{{item.title}}</span>
        <span>{{item.pubTime}}</span>
      </div>
    </div>
    <div class="block">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper, total" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      currentCount: 0,
      total: 0, //总页数
      list: ""
    };
  },
  created() {
    this.announcementList();
  },
  methods: {
    //公告列表接口
    announcementList() {
      u.announcementList(
        {
          currentCount: this.currentCount,
          pageSize: this.pageSize
        },
        data => {
          if (data && data.code == "200") {
            this.list = data.data.noticeList;
            this.total = data.data.total;
          }
        }
      );
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.currentCount = (val - 1) * 10;
      this.announcementList();
    }
  }
};
</script>

<style lang="less" scoped>
.AnnouncementList {
  height: 100%;
  background: white;
  .title {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #f4f5f6;
    span:nth-child(1) {
      margin: 0px 10px 0px 20px;
      margin-left: 20px;
      line-height: 50px;
      background: #ffb001;
      width: 5px;
      height: 18px;
      display: inline-block;
    }
  }
  .allList {
    height: calc(100% - 152px);
    overflow: auto;
    &::-webkit-scrollbar {
      background-color: #f5f5f5;
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #d6d6d6;
    }
  }
  .list {
    font-size: 14px;
    padding: 20px 15px 20px 15px;
    border: 1px solid #f0e4cc;
    // margin: 0px 30px;
    display: flex;
    justify-content: space-between;
    margin: 20px 30px 0 30px;
    box-shadow: 0px 0px 10px rgba(215, 148, 0, 0.1);
  }
  .list:hover {
    color: #ffb001;
    background: #fff4d9;
  }
  .block {
    text-align: center;
    // margin-top: 85px;
  }
  .el-pagination {
    position: relative;
    bottom: -30px;
  }
}
</style>


